<template>

  <!--
   子组件修改父组件的参数
  需要注意的是子组件不可以直接修改父组件的值，只能传出一个自定义事件，
  父组件通过调用这个自定义事件后，然后在外部修改值
   -->
  <div>
    <p>
      子组件值: Hello World Vue {{ myVariable }} ;
    </p>
    <p>
      父组件值:
      myVar={{ fatherVal }} ;
      valB={{ valB }} ;
      valC={{ valC }} ;
    </p>

  </div>
  <button @click="add">按我加1</button>

</template>


<script>
export default {
  /*
  vue提供了一个props的入口，也是父子组件之间唯一的传值方式，
  父组件通过v-bind自定义属性传入值，
  子组件通过props接受对应的参数

  公共v-bind自定义属性传值，注意由于vue的属性对大小写不敏感，
  所以如果需要写驼峰命名，需要使用-隔开
  props是大小写敏感的,不需要-隔开
  */
  // 接收父组件传递进来的属性值, 以便使用
  props: {
    //类型不对会在console有警告信息
    'fatherVal': {
      type: String,
      require: false, //是否必传
      default: "未接收到传递的参数,使用默认值", //如果没有接收到参数,设置默认值
    },
    'valB': {
      type: Number,
      validator: function (value) {
        //校验值, 校验不通过console会报错
        return value > 0;
      },
      default: () => {
        return 100
      }
    },
    "valC": Number
  },
  data() {
    return {
      myVariable: 888
    }
  },
  methods: {
    add() {
      this.myVariable++
      //子组件不可以直接修改父组件的值
      //this.valB++ 这么操作会编译报错

      //$emit方法是vue封装的，用来想父组件返回对应的自定义事件，
      //父组件通过在子组件身上设置对应的自定义事件后设置事件名称
      //用于通知父组件的函数,需要父组件绑定
      this.$emit("fatherFunc")
    }
  }
}

</script>


<style>

</style>
